<template>
  <swiper class="banner" indicator-dots circular autoplay>
    <swiper-item v-for="item in pictures" :key="item.id">
      <image @tap="onPreviewImage(item.url)" :src="item.url"></image>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello uni-app',
	  // 轮播图数据
      pictures: [
        {
          id: '1',
          url: '/static/turns/p1.jpg',
        },
        {
          id: '2',
          url: '/static/turns/p2.jpg',
        },
		]
    }
  },
  onLoad() {

  },
  methods: {
	onPreviewImage(url){
		// console.log(url)
		uni.previewImage({
			urls: this.pictures.map(v=>v.url),
			current: url
		})
	}
  }
}
</script>

<style>
.banner {
  width: 100%; /* 使 swiper 容器占满屏幕宽度 */
  height: 350rpx; /* 设置 swiper 容器的高度 */
}

.banner image {
  width: 100%; /* 图片宽度占满容器 */
  height: 100%; /* 图片高度占满容器 */
  object-fit: cover; /* 确保图片覆盖整个容器，同时保持比例 */
}
</style>